<!-- file monitor -->
<script> 
	
	$(function(){
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
		    if (this.id && this.id !== '') {
		        if (ids[this.id]) {
		            $(this).remove();
		        } else {
		            ids[this.id] = this
		        }
		    }
		});
		
		/* external function */
		
        function format(state) {
			tambahan = "";
			if (typeof $(state.element[0]).attr("alt") != "undefined")
				tambahan = $(state.element[0]).attr("alt");
            return state.text+tambahan ; 
        }
		
		$.fn.getCombobox = function(data, key, label, desc){
			var field = $(this);
			field.html("<option></option>");
			$.ajax({
				url : "c_public_function",
				data : data,
				type : 'POST', dataType : 'json'
			}).done(function(response){
				for(i=0;i<response.length;i++){
					var option = "<option value='"+response[i][key]+"' ";
					if (typeof response[i][desc] != "undefined")
						option += " alt='<div class=desc>"+response[i][desc]+"</div>'";
						
					option += " >"+response[i][label]+"</option>";
					field.append(option);
				}
				
				field.select2({
					placeholder: "-",
					allowClear: true,
					formatResult: format,
					formatSelection: format,
					escapeMarkup: function (m) {
						return m;
					}
				});
			});
		}
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		/* declarisasi */
		
		task_monitor = $("#task-monitor");
		grid_monitor = $("#grid-monitor");
		btnadd_monitor = $("#btn-add-monitor");
		btncancel_monitor =  $("#btn-cancel-monitor");
		btnsave_monitor = $("#btn-save-monitor");
		form_monitor = $("#form-monitor");
		portlet_monitor = $("#portlet-monitor");
		
		field_monitor_id = $("#monitor_id");
		field_m_proyek_id = $("#m_proyek_id");
		field_m_mandor_id = $("#m_mandor_id");
		field_monitor_periode = $("#monitor_periode");
		field_m_pembayaran_id = $("#m_pembayaran_id");
		field_m_pekerjaan_id = $("#m_pekerjaan_id");
		field_monitor_mulai = $("#monitor_mulai");
		field_monitor_selesai = $("#monitor_selesai");
		field_monitor_wakil = $("#monitor_wakil");
		field_monitor_tukang = $("#monitor_tukang");
		field_monitor_pekerja = $("#monitor_pekerja");
		field_monitor_koordinasi = $("#monitor_koordinasi");
		field_monitor_quality = $("#monitor_quality");
		field_monitor_safety = $("#monitor_safety");
		field_monitor_hk = $("#monitor_hk");
		field_monitor_grade = $("#monitor_grade");
		
		/* function */
		function pointToSkor(point){
            point = (parseInt(point)  || 0 );
            if (point < 50)
                skor = 1;
            else if (point < 70)
                skor = 2;
            else if (point < 85)
                skor = 3;
            else 
                skor = 4;
            
            return skor;
        }
        
        function calcGrade(){
            nilai1 = (parseInt(field_monitor_wakil.val())  || 0 )+
                    (parseInt(field_monitor_tukang.val()) || 0 ) +
                    (parseInt(field_monitor_pekerja.val()) || 0 );
            console.log(nilai1);
            
            if (nilai1 >= 100)
                nilai1 = 1;
            else if (nilai1 >= 50)
                nilai1 = 2;
            else 
                nilai1 = 3;
            
            nilai2 = pointToSkor(field_monitor_koordinasi.val() ) +
                    pointToSkor(field_monitor_quality.val() ) +
                    pointToSkor(field_monitor_safety.val() ) +
                    pointToSkor(field_monitor_hk.val() );
            
            console.log(nilai2);
            
            if (nilai2 >= 10)
                nilai2 = 1;
            else if (nilai2 >= 6)
                nilai2 = 2;
            else 
                nilai2 = 3;
            
            nilai = nilai1 + nilai2;
            
            if (nilai <= 3)
                grade = "Grade 1";
            else if (nilai <= 5)
                grade = "Grade 2";
            else 
                grade = "Grade 3";
            
            field_monitor_grade.val(grade);
        }
		/* method started */
		
		/* maybe you need * /
		
		field_task_assign_date.datepicker({ dateFormat : 'dd-MM-yy'});
		field_status.select2({
					placeholder: "-",
					allowClear: true,
					formatResult: format,
					formatSelection: format,
					escapeMarkup: function (m) {
						return m;
					}
				});
		m_staff_id.select2("val",dataRow.m_staff_id);
				
		/*                  */
		
		/* make component */
        
		field_m_proyek_id.getCombobox({task : "proyek"}, "proyek_id", "proyek_nama", "proyek_kode");
		field_m_mandor_id.getCombobox({task : "mandor"}, "mandor_id", "mandor_nama", "mandor_kode"); 
		field_m_pekerjaan_id.getCombobox({task : "pekerjaan"}, "pekerjaan_id", "pekerjaan_ket"); 
		field_m_pembayaran_id.getCombobox({task : "pembayaran"}, "pembayaran_id", "pembayaran_ket"); 
        field_monitor_periode.datepicker({ format : 'MM yyyy'});
        field_monitor_mulai.datepicker({ format : 'dd MM yyyy'});
        field_monitor_selesai.datepicker({ format : 'dd MM yyyy'});
        
		grid_monitor.unugrid({
			url: 'c_monitor',
			data: {task : 'LIST'},
			column :[
				{ label: 'Kode Proyek'  ,index: 'proyek_kode'  },
				{ label: 'Nama Proyek'  ,index: 'proyek_nama'  },
				{ label: 'Cabang'  ,index: 'cabang_nama'  },
				{ label: 'Vendor'  ,index: 'mandor_nama'  },
				{ label: 'Pembayaran'  ,index: 'pembayaran_ket'  },
				{ label: 'Pekerjaan'  ,index: 'pekerjaan_ket'  },
//				{ label: 'monitor_mulai'  ,index: 'monitor_mulai'  },
//				{ label: 'monitor_selesai'  ,index: 'monitor_selesai'  },
//				{ label: 'monitor_wakil'  ,index: 'monitor_wakil'  },
//				{ label: 'monitor_tukang'  ,index: 'monitor_tukang'  },
//				{ label: 'monitor_pekerja'  ,index: 'monitor_pekerja'  },
//				{ label: 'monitor_koordinasi'  ,index: 'monitor_koordinasi'  },
//				{ label: 'monitor_quality'  ,index: 'monitor_quality'  },
//				{ label: 'monitor_safety'  ,index: 'monitor_safety'  },
//				{ label: 'monitor_hk'  ,index: 'monitor_hk'  },
				
				{ label: ''  ,index: 'monitor_id',type: 'action' }
			],
			deleteClick : function(id,dataRow, c ){
				if (id != null){
					confr = confirm("Apa Anda yakin menghapus data ini?");
					if (confr){
						var data = $(this).data();
						$.ajax({
							type: 'POST',
							url: 'c_monitor',
							data: {monitor_id: id, task : 'DELETE'},
							success: function(response){
								if(response==1){
									grid_monitor.unugrid('refresh');
								}
							}
						});
					}
				}
			},
			editClick : function(id,dataRow, c ){
				if (id != null){
					task_monitor.val("UPDATE");
					
					field_monitor_id.val(dataRow.monitor_id);
					field_m_proyek_id.select2("val",dataRow.m_proyek_id);
                    console.log(dataRow.m_proyek_id);
					field_m_mandor_id.select2("val",dataRow.m_mandor_id);
					field_m_pembayaran_id.select2("val",dataRow.m_pembayaran_id);
					field_m_pekerjaan_id.select2("val",dataRow.m_pekerjaan_id);
					field_monitor_periode.val(dataRow.monitor_periode);
					field_monitor_mulai.val(dataRow.monitor_mulai);
					field_monitor_selesai.val(dataRow.monitor_selesai);
					field_monitor_wakil.val(dataRow.monitor_wakil);
					field_monitor_tukang.val(dataRow.monitor_tukang);
					field_monitor_pekerja.val(dataRow.monitor_pekerja);
					field_monitor_koordinasi.val(dataRow.monitor_koordinasi);
					field_monitor_quality.val(dataRow.monitor_quality);
					field_monitor_safety.val(dataRow.monitor_safety);
					field_monitor_hk.val(dataRow.monitor_hk);
					
                    $.ajax({
                        url : "c_monitor",
                        data : {task : "DETAIL", monitor_id : dataRow.monitor_id},
                        dataType : 'json',
                        type : 'post'
                    }).done(function(response){
                        $("#detail_harsat").html("");
                        for(i = 0; i < response.length; i++){
                                $("#detail_harsat").append('<div class="input-group harsat"><input name="harsat_ket" class="form-control input-small" placeholder=Keterangan value="'+response[i].harsat_ket+'" /><input name="harsat_satuan" class="form-control input-xsmall" placeholder=Satuan value="'+response[i].harsat_satuan+'" /><input name="harsat_nilai" class="currency form-control input-small" placeholder=Harga  value="'+response[i].harsat_nilai+'" /></div>');
                        }
                        
                        $(".currency").keyup(function(){
                            $(this).formatCurrency();
                        });
                        
                        $(".currency").keyup();
                    });
                    
                    calcGrade();
					portlet_monitor.show();
				}
			}
		});
        
		/* event */
		
        
        
		$(".search input").keypress(function(e){
            if (e.keyCode == 13){
                $(".search button").click();
            }
        });
        
		$(".search button").click(function(){
            inputsearch = $(".search input").val();
            grid_monitor.unugrid("setData",{ search : inputsearch});
            grid_monitor.unugrid("refresh");
        });
        
        $(".btnharsat").click(function(){
            data = $(this).data();
            if (data.operator == 1){
                $("#detail_harsat").append('<div class="input-group harsat"><input name="harsat_ket" class="form-control input-small" placeholder=Keterangan /><input name="harsat_satuan" class="form-control input-xsmall" placeholder=Satuan /><input name="harsat_nilai" class="currency form-control input-small" placeholder=Harga  /></div>');
            }else{
                $("#detail_harsat").find(".harsat:last").remove();
            }
            
		
            $(".currency").keyup(function(){
                $(this).formatCurrency();
            });
        });
        
        field_m_mandor_id.change(function(){
            value = field_m_mandor_id.val();
            field_m_pekerjaan_id.getCombobox({task : "pekerjaan", mandor_id : value}, "pekerjaan_id", "pekerjaan_ket"); 
        });
		btnadd_monitor.click(function(){
			btncancel_monitor.click();
			task_monitor.val("INSERT");
			portlet_monitor.show();
            
            $("#detail_harsat").html("");
            field_m_proyek_id.select2("val",0);
            field_m_mandor_id.select2("val",0);
            field_m_pembayaran_id.select2("val",0);
            field_m_pekerjaan_id.select2("val",0);
		});
		
		btncancel_monitor.click(function(){
			portlet_monitor.hide();
		});
		
		btnsave_monitor.click(function(){
            
            $(".currency").each(function(id,el){
                $(el).toNumber();
            });
            
			data = form_monitor.serializeObject();
			$.ajax({
				url : "c_monitor",
				data : data,
				type : 'POST'
			}).done(function(response){
				grid_monitor.unugrid('refresh');
				btncancel_monitor.click();
			});
		});
        
        $(".calc-grade").keyup(function(){
            calcGrade();
        });
	});
</script>
<style>
    .harsat .currency{
        text-align:right;
    }
    </style>
	<div class="portlet box blue" hidden=hidden tabindex="-1" id="portlet-monitor">
	   <div class="portlet-title">
		  <div class="caption"><i class="icon-reorder"></i>Form monitor</div>
		  <div class="tools">
			 <a href="javascript:;" class="collapse"></a>
		  </div>
	   </div>

		<div class="portlet-body form">
		<!-- BEGIN FORM-->
		<form action="#" id="form-monitor" class="horizontal-form" onSubmit="javascript:return false;">

		<input type="hidden" value="INSERT" name="task" id="task-monitor">
		<input type="hidden"  id="monitor_id" name="monitor_id" />
		
		<input id="task_id" name="task_id" hidden=hidden  />

			 <div class="form-body">
				<h3 class="form-section">Data Informasi</h3>

				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Proyek:</label><select id="m_proyek_id" name="m_proyek_id" class="form-control" ></select></div></div>
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Vendor:</label><select id="m_mandor_id" name="m_mandor_id" class="form-control" ></select></div></div></div>
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Periode:</label><input id="monitor_periode" name="monitor_periode" class="form-control" /></div></div>
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Pembayaran:</label><select id="m_pembayaran_id" name="m_pembayaran_id" class="form-control" /></div></div></div>
                 
                <h3 class="form-section">Pekerjaan</h3>
                 
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Pekerjaan Yang ditangani:</label><select id="m_pekerjaan_id" name="m_pekerjaan_id" class="form-control" /></div></div>
                 <div class="col-md-6"><div class="form-group"><label class="control-label">Harsat Pekerjaan:</label>
                      
                     <div id="detail_harsat"></div> <p>
                     <a href="javascript:;"><i class="icon-plus btnharsat" data-operator="1"></i></a>   
                     <a href="javascript:;"><i class="icon-minus btnharsat"  data-operator="2"></i></a></p>
                     </div></div></div>
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Waktu Mulai:</label><input id="monitor_mulai" name="monitor_mulai" class="form-control" /></div></div>
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Waktu Selesai:</label><input id="monitor_selesai" name="monitor_selesai" class="form-control" /></div></div></div>
                 
                <h3 class="form-section">Performance</h3>
                 
                <h4 class="form-section">Jumlah (Orang)</h4>
                 
				<div class="row"><div class="col-md-4"><div class="form-group"><label class="control-label">Wakil Mandor:</label><input id="monitor_wakil" name="monitor_wakil" class="form-control calc-grade" /></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">Tukang:</label><input id="monitor_tukang" name="monitor_tukang" class="form-control calc-grade" /></div></div><div class="col-md-4"><div class="form-group"><label class="control-label">Pekerja:</label><input id="monitor_pekerja" name="monitor_pekerja" class="form-control calc-grade" /></div></div></div>
                 
                <h4 class="form-section">Evaluasi / Penilaian</h4>
                 
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Koordinasi:</label><input id="monitor_koordinasi" name="monitor_koordinasi" class="form-control calc-grade" /></div></div> 
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Quality:</label><input id="monitor_quality" name="monitor_quality" class="form-control calc-grade" /></div></div></div>
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Safety:</label><input id="monitor_safety" name="monitor_safety" class="form-control calc-grade" /></div></div>
                    <div class="col-md-6"><div class="form-group"><label class="control-label">H k (LINGK):</label><input id="monitor_hk" name="monitor_hk" class="form-control calc-grade" /></div></div></div>
		
                <h4 class="form-section">Grade</h4>
                 
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Nilai grade:</label><input id="monitor_grade" name="monitor_grade" class="form-control" readonly /></div></div></div>
                 
			 </div>
			 <div class="form-actions right">
				<button type="reset" id="btn-cancel-monitor" class="btn default">Cancel</button>
				<button type="submit" id="btn-save-monitor" class="btn blue"><i class="icon-ok"></i> Save</button>
			 </div>
		  </form>
		  <!-- END FORM--> 
	   </div>
	</div>
    
	 <div class="row">
		<div class="col-md-12">
		   <!-- BEGIN SAMPLE TABLE PORTLET-->
		   <div class="portlet box yellow">
			  <div class="portlet-title">
				 <div class="caption"><i class="icon-cogs"></i>monitor</div>
				 <div class="tools">
					<a href="javascript:;" class="collapse"></a>
				 </div>
			  </div>
			  <div class="portlet-body flip-scroll">
			  
			<button id="btn-add-monitor" class="btn btn-primary">Add</button>
			<p>&nbsp;</p>
			
                      <div class="input-group search">
                         <input type="text" class="form-control" placeholder="Filter">
                         <span class="input-group-btn">
                         <button type="button" class="btn yellow">Search !</button>
                         </span>
                      </div>
			<p>&nbsp;</p>
			  <div id="grid-monitor" class="table-responsive"></div>
				</div>
			 </div>
		</div>
	</div>